<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui"
	lang="en">
	
	<ui:decorate template="/WEB-INF/facelets/faceletListar.xhtml">
		<ui:define name="form">
			<p:outputPanel id="painelPrincipal" autoUpdate="true">
				<p:panel id="painelListar" rendered="#{SocioMB.modoListar}" >
					<h:form>
						<p:commandButton action="#{SocioMB.criar}" value="Novo &raquo;"></p:commandButton>

					    <p></p>
						
						<p:dataTable 
							value="#{SocioMB.lista}" 
							var="obj" 
							selectionMode="single" 
							selection="#{SocioMB.entidade}"
							paginator="true"
							rows="10"
							rowKey="#{obj.id}"
							widgetVar="tabela"
							emptyMessage="Nenhum registro encontrado."
							rowIndexVar="indice">
						
							<p:ajax event="rowSelect" listener="#{SocioMB.selecionarEditar}"></p:ajax>
							<p:column>
								<f:facet name="header">
							    	<h:outputText value="Nº" />
							   	</f:facet>
							    <div align="center">
							    	<h:outputText value="#{indice + 1}" />
							    </div>
							</p:column>
							
							<p:column>
					        	<f:facet name="header">
					        		<h:outputText value="Nome" />
					        	</f:facet>
					            <h:outputText value="#{obj.nome}" />
					        </p:column>
						        
					        <p:column>
					        	<f:facet name="header">
					        		<h:outputText value="E-mail" />
					        	</f:facet>
					            <h:outputText value="#{obj.email}" />
					        </p:column>
					        
					        <p:column>
					        	<f:facet name="header">
					        		<h:outputText value="Celular" />
					        	</f:facet>
					            <h:outputText value="#{obj.endereco.telefoneCelular}" />
					        </p:column>
					    </p:dataTable>
				    </h:form>
				</p:panel>

				<p:panel id="painelEditar" rendered="#{SocioMB.modoEditar}" >
					<h:form>
						<p:messages id="mensagens"></p:messages>	
				
						<fieldset>
							<legend>Cadastro de Sócios</legend>
							
							<div class="row-fluid">
								<div class="span6">
									<div class="control-group">
										<h:outputLabel value="Nome:" for="nome"
											styleClass="control-label" />
										<p:inputText id="nome" value="#{SocioMB.entidade.nome}" maxlength="30"/>
									</div>
								</div>
								
								<div class="span6">
									<div class="control-group">
										<h:outputLabel value="E-mail:" for="email"
											styleClass="control-label" />
										<p:inputText id="email" value="#{SocioMB.entidade.email}" maxlength="100"/>
									</div>
								</div>
							</div>
							
							<div class="row-fluid">
								<div class="span6">
									<div class="control-group">
										<h:outputLabel value="Telefone fixo:" for="telFixo"
											styleClass="control-label" />
										<p:inputMask mask="(99) 9999-9999" id="telFixo" value="#{SocioMB.entidade.endereco.telefoneFixo}" maxlength="15" />
									</div>
								</div>
								
								<div class="span6">
									<div class="control-group">
										<h:outputLabel value="Telefone celular:" for="telCelular"
											styleClass="control-label" />
										<p:inputMask mask="(99) 9999-9999" id="telCelular" value="#{SocioMB.entidade.endereco.telefoneCelular}" maxlength="15" />
									</div>
								</div>
							</div>
							
							<div class="row-fluid">
								<div class="span6">
									<div class="control-group">
										<h:outputLabel value="Endereço:" for="endereco"
											styleClass="control-label" />
										<p:inputText id="endereco" value="#{SocioMB.entidade.endereco.logradouro}" maxlength="300"/>
									</div>
								</div>
							
								<div class="span6">
									<div class="control-group">
										<h:outputLabel value="Número:" for="numero"
											styleClass="control-label" />
										<p:inputText id="numero" value="#{SocioMB.entidade.endereco.numero}" maxlength="10"/>
									</div>
								</div>
							</div>
							
							<div class="row-fluid">
								<div class="span6">
									<div class="control-group">
										<h:outputLabel value="CEP:" for="cep"
											styleClass="control-label" />
										<p:inputMask mask="99.999-999" id="cep" value="#{SocioMB.entidade.endereco.cep}" maxlength="10"/>
									</div>
								</div>
							
								<div class="span6">
									<div class="control-group">
										<h:outputLabel value="UF:" for="uf" styleClass="control-label" />
										<p:selectOneMenu id="uf" value="#{SocioMB.uf}" converter="entidadeConverter">
											<f:selectItems 
												value="#{SocioMB.ufs}" 
												itemLabel="#{uf.nome}"
												itemValue="#{uf}"
												var="uf"/>
										<p:ajax update="cid" listener="#{SocioMB.selecionarCidade}" process="@form">
										</p:ajax>					
										</p:selectOneMenu>
									</div>
								</div>
							</div>
							
							<div class="row-fluid">
								<div class="span6">
									<div class="control-group">
										<h:outputLabel value="Cidade:" for="cid" styleClass="control-label" />
										<p:selectOneMenu id="cid" value="#{SocioMB.entidade.cidade}" converter="entidadeConverter">
											<f:selectItems 
												value="#{SocioMB.cidades}" 
												itemLabel="#{cidade.nome}"
												itemValue="#{cidade}"
												var="cidade"/>
										</p:selectOneMenu>
									</div>
								</div>
								
								<div class="span6">
									<div class="control-group">
										<h:outputLabel value="Ativo?:" for="ativo"/>
										<p:selectBooleanCheckbox id="ativo" value="#{SocioMB.entidade.ativo}" />
									</div>
								</div>
							</div>
							
							<div class="control-group">
								<p:commandButton 
									value="Gravar" 
									action="#{SocioMB.gravar}"
									update="mensagens"/>
								<span></span>
							
								<p:commandButton 
									value="Voltar" 
									action="#{SocioMB.voltar}"
									immediate="true">
								</p:commandButton>
								
								<span></span>
									
								<p:commandButton 
									value="Excluir" 
									action="#{SocioMB.excluir}"
									rendered="#{SocioMB.exibirExcluir}"
									onclick="confirmation.show()" 
									type="button">
								</p:commandButton>
									
								<p:confirmDialog 
									id="confirmDialog" 
									message="Confimar a exclusão do registro?"  
							        header="Confirmação!" 
							        severity="alert" 
							        widgetVar="confirmation">  
							                 
							    <p:commandButton 
							       	id="confirm" 
							       	value="Sim" 
							       	oncomplete="confirmation.hide()"  
							        action="#{SocioMB.excluir}"/>  
							        
							    <p:commandButton 
							       	id="decline" 
							       	value="Não" 
							       	onclick="confirmation.hide()" 
							       	type="button" />   
							                  
							    </p:confirmDialog>  
							</div>
						</fieldset>
					</h:form>
				</p:panel>
			</p:outputPanel>				
		</ui:define>
	</ui:decorate>
</html>